<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-product-ranking-table">
    <view class="table-title">
      {{ option.titles[sts] }}
    </view>
    <view class="table-time">
      <view
        v-if="dateData.value === 1 || dateData.value === 2"
        class="table-time-left"
      >
        {{ time( dateData.dateRange[0]) }} - {{ time( dateData.dateRange[1]) }}
      </view>
      <view
        v-if="dateData.value === 3 || dateData.value === 4"
        class="table-time-left"
      >
        {{ time(dateData.dateRange[0]) }}
      </view>
      <view
        class="table-time-right"
        @tap="showSelectDate = true"
      >
        {{ dateData.label }}
      </view>
    </view>
    <view class="table">
      <view class="table-tab">
        <view class="table-tab-item">
          排名
        </view>
        <view class="table-tab-item-center">
          商品信息
        </view>
        <view class="table-tab-item">
          {{ option.criteria[sts] }}
        </view>
      </view>
      <empty-tips
        v-if="isLoaded && !rankData[option.keyData[sts]].length"
        :tips-list="['暂无数据']"
      />
      <view
        v-for="(item,index) in rankData[option.keyData[sts]]"
        v-else
        :key="index"
        class="table-item"
      >
        <view
          v-if="index<4"
          class="table-left"
        >
          <view :class="['rank-icon','rank-'+(index+1)]">
            {{ index+1 }}
          </view>
        </view>
        <view
          v-else
          class="table-left"
        >
          {{ index+1 }}
        </view>
        <view class="table-item-center">
          <!-- 仅排版用 -->
          <view class="blank" />
          <view class="prod-image">
            <img-show :src="item.pic" />
          </view>
          <view class="prod-name">
            {{ item.prodName }}
          </view>
        </view>
        <view class="table-right">
          {{ item.criteria }}
        </view>
      </view>
    </view>
    <select-date
      v-if="showSelectDate"
      :value="dateData"
      @cancal="onCancal"
      @handle-select-date="onHandleSelectDate"
    />
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { reactive } from 'vue'

const time = (value) => {
  if (value.length > 11) {
    return value.substring(0, 10)
  }
  return value
}
defineProps({
  //  0:'支付排行',  1:'访问排行',   2:'退款排行',
  sts: {
    type: Number,
    default: 0
  }
})

const isLoaded = ref(false) // 列表是否加载完毕
// 非响应性数据
const option = {
  titles: ['商品支付排行', '商品访问排行', '商品退款排行'],
  // 排名标准
  criteria: ['支付数', '访问数', '退款数'],
  // data属性名字段
  keyData: ['payAmounts', 'visitors', 'refund']
  // 排名标准字段
}
const showSelectDate = ref(false)
const dateData = reactive({
  value: 2,
  label: '近30天',
  dateRange: ['', '']
})

// 排行数据  字段payAmounts、visitors
const rankData = reactive({
  payAmounts: [],
  visitors: [],
  refund: []
})

onMounted(() => {
  initDateData()
  initRankData()
})

const initDateData = () => {
  const startDay = -30
  const endDay = -1
  const startTime = dayjs()
    .add(startDay, 'days')
    .startOf('days')
    .format('YYYY.MM.DD HH:mm:ss')
  // 结束时间
  const endTime = dayjs()
    .add(endDay, 'days')
    .endOf('days')
    .format('YYYY.MM.DD HH:mm:ss')
    // .format('YYYY-MM-DD HH:mm:ss')

  dateData.dateRange = [startTime, endTime]
}

const initRankData = () => {
  // 访问排行接口参数特化
  let endTimeV
  if (dateData.value == 3) endTimeV = dayjs(dateData.dateRange[0], 'YYYY-MM-DD HH:mm:ss').endOf('days').format('YYYY-MM-DD HH:mm:ss')
  else if (dateData.value == 4) endTimeV = dayjs(dateData.dateRange[0], 'YYYY-MM-DD HH:mm:ss').endOf('Months').format('YYYY-MM-DD HH:mm:ss')
  else endTimeV = dayjs(dateData.dateRange[1].replace(/\./g, '/'), 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
  const startTimeV = dayjs(dateData.dateRange[0].replace(/\./g, '/'), 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
  uni.showLoading({
    title: '加载中'
  })
  // 请求访问排行数据
  const proVisit = new Promise((resolve) => {
    isLoaded.value = false
    const paramsVisit = {
      url: '/multishop/prodAnalysis/getPayAmountTop',
      method: 'GET',
      data: {
        startTime: startTimeV,
        endTime: endTimeV,
        size: 10
      }

    }
    http.request(paramsVisit).then(({ data }) => {
      isLoaded.value = true
      if (data.visitors) {
        const result = data.visitors.map(item => ({
          criteria: item.visitorNum,
          prodName: item.prodName,
          pic: item.pic
        }))
        rankData.visitors = result
      } else rankData.visitors = []
      resolve()
    })
  })

  const proPay = new Promise((resolve) => {
  // 请求支付排行数据
    isLoaded.value = false
    const paramsPay = {
      url: '/shop/statisticsOrder/getPayAmountTop',
      method: 'GET',
      data: {
        startTime: startTimeV,
        endTime: endTimeV,
        size: 10
      }
    }
    http.request(paramsPay).then(({ data }) => {
      isLoaded.value = true
      const result = data.map(item => ({
        criteria: item.payCount,
        prodName: item.prodName,
        pic: item.pic
      }))
      rankData.payAmounts = result
      resolve()
    })
  }
  )

  // 请求退款排行数据.
  const proRefund = new Promise((resolve) => {
    isLoaded.value = false
    const paramsRefund = {
      url: '/shop/statisticsOrder/getRefundRankingByProd',
      method: 'GET',
      data: {
        startTime: startTimeV,
        endTime: endTimeV,
        size: 10
      },
      callBack: data => {
        isLoaded.value = true
        const result = data.map(item => ({
          criteria: item.refundCount,
          prodName: item.refundPordName,
          pic: item.pic
        }))
        rankData.refund = result
        resolve()
      }
    }
    http.request(paramsRefund).then(({ data }) => {
      isLoaded.value = true
      const result = data.map(item => ({
        criteria: item.refundCount,
        prodName: item.refundPordName,
        pic: item.pic
      }))
      rankData.refund = result
      resolve()
    })
  }
  )

  Promise.all([proVisit, proPay, proRefund]).then(() => {
    uni.hideLoading()
  }
  )
}
/**
 * 取消弹窗
 */
const onCancal = () => {
  showSelectDate.value = false
}

/**
 * 获取选择的时间区间
 */
const onHandleSelectDate = (data) => {
  // dateData = data
  Object.assign(dateData, data)
  initRankData()

  onCancal()
}

</script>

<style lang="scss" scoped>
@use "./product-ranking-table.scss"
</style>
